/*
 *
 * 　　┏┓　　　┏┓+ +
 * 　┏┛┻━━━┛┻┓ + +
 * 　┃　　　　　　　┃
 * 　┃　　　━　　　┃ ++ + + +
 *  ████━████ ┃+
 * 　┃　　　　　　　┃ +
 * 　┃　　　┻　　　┃
 * 　┃　　　　　　　┃ + +
 * 　┗━┓　　　┏━┛
 * 　　　┃　　　┃
 * 　　　┃　　　┃ + + + +
 * 　　　┃　　　┃
 * 　　　┃　　　┃ +  神兽保佑
 * 　　　┃　　　┃    代码无bug
 * 　　　┃　　　┃　　+
 * 　　　┃　 　　┗━━━┓ + +
 * 　　　┃ 　　　　　　　┣┓
 * 　　　┃ 　　　　　　　┏┛
 * 　　　┗┓┓┏━┳┓┏┛ + + + +
 * 　　　　┃┫┫　┃┫┫
 * 　　　　┗┻┛　┗┻┛+ + + +
 *
 *
 * @Descripttion:
 * @version:
 * @Author: vai-bowei
 * @Date: 2021-10-15 15:00:29
 * @LastEditors: vai-bowei
 * @LastEditTime: 2021-10-15 15:13:25
 */

import { Component } from "react";
import Taro from '@tarojs/taro'
import { View, Image, Text, Button, Input, ScrollView } from "@tarojs/components";
// import {AtSwitch, AtForm} from 'taro-ui'

import "../../images/public/style.css";
import "./index.scss";

/*
    参数说明
    传入：{
    
    }
    提供回调事件：{
    
    }
*/

export default class LgLoginOfWeapp extends Component {
  constructor() {
    super(...arguments);
  }
  state = {
    loginType: 0,
    schoolSearchFocus: false,
    schoolName: "",
    isShowSchoolLists:false,
    schoolArr:[],
    searchSchoolArr:[{SchoolName:'LG蓝鸽小学'},{SchoolName:'LG蓝鸽大学'},{SchoolName:'LG蓝鸽中学'},{SchoolName:'LG蓝鸽小学'},{SchoolName:'LG蓝鸽大学'},{SchoolName:'LG蓝鸽中学'},{SchoolName:'LG蓝鸽小学'},{SchoolName:'LG蓝鸽大学'},{SchoolName:'LG蓝鸽中学'},{SchoolName:'LG蓝鸽小学'},{SchoolName:'LG蓝鸽大学'},{SchoolName:'LG蓝鸽中学'},],
    account: "",
    password: "",
  };
  triggerLoginType = (e) => {
    let { loginType } = this.state,
      curHandType = e.currentTarget.dataset.type;
    if (loginType === curHandType) return;
    this.setState({ loginType: curHandType });
  };
  handSearchSchoolItem = (e)=>{
  }
  handMouseDownSearch = (e)=>{
  }
  schoolFocusAction = (e)=>{
  }
  schoolBlurAction = (e)=>{
    this.setState({ isShowSchoolLists:false })
  }
  schoolInput = (e)=>{
    const { value } = e.detail
    this.setState({ schoolName:value, isShowSchoolLists:true })
  }
  componentDidMount() {
    Taro.getSystemInfo({
        success(res) {
            console.log(res.model)
            console.log(res.pixelRatio)
            console.log(res.windowWidth)
            console.log(res.windowHeight)
            console.log(res.language)
            console.log(res.version)
            console.log(res.platform)
            const { windowWidth } = res
            if(windowWidth>1024){
              
            }
        }
    })
  }
  render() {
    const lists = this.state.lists || [],
      loginType = this.state.loginType,
    className = this.props.className ? " " + this.props.className : "",
      systemIconUrl =
        this.props.systemIconUrl || require("./images/login-logo.png"), //系统图标
      systemName = this.props.systemName || "蓝鸽校园通", //系统名称
      schoolSearchFocus = this.state.schoolSearchFocus,
      schoolName = this.state.schoolName,
      isShowSchoolLists = this.state.isShowSchoolLists,
      searchSchoolArr = this.state.searchSchoolArr,
      account = this.state.account,
      password = this.state.password;
    return (
      <View className="c-page-wrapper">
        {/* 头部背景 */}
        <View className="login-back">
          {/* 图片背景 */}
          <Image
            className="background-image"
            src={require("./images/login-back.png")}
          />
          {/* 系统头像 */}
          <View className="login-content">
            <View className="login_sysimg_wrapper">
              <View className="login_sysimg_inwrapper">
                <Image
                  className="login-sysimg"
                  mode="scaleToFill"
                  src={systemIconUrl}
                />
              </View>
            </View>
            <Text className="login-text">{systemName}</Text>
          </View>
        </View>
        {/* 身份选择 */}
        <View className="login-type">
          <View
            className="login-type-item"
            onClick={this.triggerLoginType}
            data-type={0}
          >
            <View
              className="login-type-empty"
              style={{ display: loginType == 1 ? "block" : "none" }}
            ></View>
            <Image
              className="login-type-img"
              src={require("./images/login-identity.png")}
              style={{ display: loginType == 0 ? "block" : "none" }}
              mode="scaleToFill"
            />
            <View className="login-type-txt">校内人员(含家长)</View>
          </View>
          <View
            className="login-type-item"
            onClick={this.triggerLoginType}
            data-type={1}
          >
            <View
              className="login-type-empty"
              style={{ display: loginType == 0 ? "block" : "none" }}
            ></View>
            <Image
              className="login-type-img"
              src={require("./images/login-identity.png")}
              style={{ display: loginType == 1 ? "block" : "none" }}
              mode="scaleToFill"
            />
            <View className="login-type-txt">校外人员</View>
          </View>
        </View>
        {/* 表单 */}
        <View className="login-school-view">
          <View className="login-cell" id="login-cell-school">
            <Image
              className="login-icon"
              src={require("./images/login-school-icon.png")}
            />
            <Input
              id="searchSchoolInput"
              adjustPosition={true}
              className="login-input"
              focus={schoolSearchFocus}
              onFocus={this.schoolFocusAction}
              onBlur={this.schoolBlurAction}
              placeholder="请输入名称搜索学校"
              value={schoolName}
              onInput={this.schoolInput}
              placeholderClass="login-palceholder"
              maxlength="25"
            />
          </View>
          <ScrollView
            scrollY
            style={{display:isShowSchoolLists?'block':'none'}}
            className="list-cell"
          >
            {
                searchSchoolArr.map((o, i)=>(
                    <View
                        onClick={this.handSearchSchoolItem}
                        onMouseDown={this.handMouseDownSearch}
                        data-item={o}
                        key={'list-cell-item'+i}
                        className="school-cell"
                        hoverClass="school-cell-hover"
                    >
                        {o.SchoolName}
                    </View>
                ))
            }
          </ScrollView>
        </View>

        <View className="login-cell">
          <Image
            className="login-icon"
            src={require("./images/login-user.png")}
          />

          <Input
            className="login-input"
            placeholder="请输入账号"
            value={account}
            bindinput="accountAction"
            placeholder-class="login-palceholder"
            maxlength="30"
          />
        </View>

        <View className="login-cell">
          <Image
            className="login-icon"
            src={require("./images/login-password.png")}
          />
          <Input
            className="login-input"
            placeholder="请输入密码"
            password="true"
            value={password}
            bindinput="passwordAction"
            placeholder-class="login-palceholder"
            maxlength="30"
          />
          <View className="login-loss-pwd">忘记密码?</View>
        </View>

        <Button
          className="login-button"
          hoverClass="login-button-active"
          bindtap="loginAction"
        >
          登录
        </Button>

        <View className="login-to-registe">
            还没有账号？点击
            <Text className="login-to-link">注册账号</Text>
        </View>
      </View>
    );
  }
}
